<template>
   <div>
      <div class="register_con">
         <div class="l_con fl">
            <a href="/" class="reg_logo"><img src="/static/images/logo.png"></a>
            <div class="reg_slogan">商品美 · 种类多 · 欢迎光临</div>
            <div class="reg_banner"></div>
         </div>

         <div class="r_con fr">
            <div class="reg_title clearfix">
               <h1>用户注册</h1>
               <a href="/login">登录</a>
            </div>
            <div class="reg_form clearfix" id="app" v-cloak>
               <form method="post" @submit.prevent="on_submit">
                  <ul>
                     <li>
                        <label>用户名:</label>
                        <input @blur="check_username" v-model="username" type="text" name="username" id="user_name">
                        <span v-show="error_name" class="error_tip">{{ error_name_message }}</span>
                        <span v-show="error_cname" class="error_tip1">{{ error_name_message }}</span>
                     </li>
                     <li>
                        <label>密码:</label>
                        <input v-model="password" @blur="check_pwd" type="password" name="password" id="pwd">
                        <span v-show="error_password" class="error_tip">{{ error_pwd_message }}</span>
                        <span v-show="error_cpassword" class="error_tip1">{{ error_pwd_message }}</span>
                     </li>
                     <li>
                        <label>确认密码:</label>
                        <input @blur="check_cpwd" v-model="password2" type="password" name="password2" id="cpwd">
                        <span v-show="error_check_password" class="error_tip">两次输入的密码不一致</span>
                        <span v-show="error_check_cpassword" class="error_tip1">密码通过</span>
                     </li>
                     <li>
                        <label>手机号:</label>
                        <input @blur="check_phone" v-model="phone" type="text" name="phone" id="phone">
                        <span v-show="error_phone" class="error_tip">{{ error_phone_message }}</span>
                        <span v-show="error_cphone" class="error_tip1">{{ error_phone_message }}</span>
                     </li>
                     <li>
                        <label>图形验证码:</label>
                        <input type="text" v-model="image_code" @blur="check_image_code" name="image_code"
                               id="pic_code" class="msg_input">
                        <img :src="'http://127.0.0.1:8000/userapp/image/?image_id='+image_id"
                             @click="generate_image_code" alt="图形验证码" class="pic_code">
                        <span v-show="error_image" class="error_tip">{{ error_image_code_message }}</span>
                        <span v-show="error_image_code" class="error_tip1">{{ error_image_code_message }}</span>
                     </li>
                     <li>
                        <label>短信验证码:</label>
                        <input type="text" v-model="phone_code" @blur="check_sms_code" name="sms_code" id="msg_code"
                               class="msg_input">
                        <a href="javascript:;" @click="send_sms_code" class="get_msg_code">获取短信验证码</a>
                        <span v-show="error_sms" class="error_tip">{{ error_sms_code_message }}</span>
                        <span v-show="error_sms_code" class="error_tip1">{{ error_sms_code_message }}</span>
                     </li>
                     <li class="agreement">
                        <input v-model="allow" @change="check_allow" type="checkbox" name="allow" id="allow">
                        <label>同意”美多商城用户使用协议“</label>
                        <span v-show="error_allow" class="error_tip">请勾选用户协议</span>
                     </li>
                     <li class="reg_sub">
                        <input type="submit" value="注 册">
                     </li>
                  </ul>
               </form>
            </div>
         </div>
      </div>
      <BaseBodyer></BaseBodyer>
   </div>
</template>

<script>
   import BaseBodyer from "../Header/BaseBodyer";

   export default {
      name: "Register",
      components: {
         BaseBodyer,
      },
      data() {
         return {
            username: '',
            password: '',
            password2: '',
            phone: '',
            phone_code: '',
            image_code: '',

            allow: '',
            error_name: false,
            error_cname: false,
            error_password: false,
            error_cpassword: false,
            error_check_password: false,
            error_check_cpassword: false,
            error_phone: false,
            error_cphone: false,
            error_allow: false,

            error_image: false,
            error_image_code: false,
            error_sms: false,
            error_sms_code: false,

            error_name_message: '',
            error_pwd_message: '',
            error_phone_message: '',

            image_id: '',
            phone_id: '',
            error_image_code_message: '',
            error_sms_code_message: '',
         }
      },
      methods: {
         check_username() {
            // 用户名校验
            let re = /^[a-zA-Z0-9_-]{2,20}$/;
            let re2 = /^[0-9]+$/;
            // re.test(this.username) && !re2.test(this.username)
            if (this.username) {
               this.$axios({
                  url: 'userapp/user/',
                  method: 'GET',
                  params: {
                     username: this.username
                  }
               }).then((resposne) => {
                  if (resposne.data.code === 400) {
                     this.error_name = true;
                     this.error_cname = false;
                     this.error_name_message = resposne.data.msg;
                  } else {
                     this.error_name = false;
                     this.error_cname = true;
                     this.error_name_message = resposne.data.msg;
                  }
               }).catch((error) => {
                  console.log(error)
               })
            } else {
               this.error_name = true;
               this.error_cname = false;
               this.error_name_message = '请输入2-20个字符的用户名且不能为纯数字';
            }
         },
         check_pwd() {
            // 密码校验
            this.check_username();
            let re = /^\w{3,18}&/;
            if (re.test(this.password) || this.password.length <= 6 && this.password.length >= 3) {
               this.error_password = false;
               this.error_cpassword = true;
               this.error_pwd_message = '安全级别: 弱'
            } else if (re.test(this.password) || this.password.length <= 12 && this.password.length > 6) {
               this.error_password = false;
               this.error_cpassword = true;
               this.error_pwd_message = '安全级别: 中'
            } else if (re.test(this.password) || this.password.length <= 18 && this.password.length > 12) {
               this.error_password = false;
               this.error_cpassword = true;
               this.error_pwd_message = '安全级别: 强'
            } else {
               this.error_password = true;
               this.error_cpassword = false;
               this.error_pwd_message = '请输入3-18位的密码'
            }
         },
         check_cpwd() {
            // 密码对比
            this.check_pwd();
            if (!this.password2) {
               this.error_check_password = true;
               this.error_check_cpassword = false;
            } else if (this.password === this.password2) {
               this.error_check_password = false;
               this.error_check_cpassword = true;
            }
         },
         check_phone() {
            // 手机号验证
            this.check_cpwd();
            let re = /^1[345789]\d{9}$/;
            if (re.test(this.phone)) {
               this.$axios({
                  url: 'userapp/phone/',
                  method: 'GET',
                  params: {
                     phone: this.phone
                  }
               }).then(resp => {
                  if (resp.data.code === 200) {
                     this.error_phone = false;
                     this.error_cphone = true;
                  } else if (resp.data.code === 400) {
                     this.error_phone = true;
                     this.error_cphone = false;
                  }
                  this.error_phone_message = resp.data.msg;
               }).catch(error => {
                  console.log(error)
               });
            } else {
               this.error_phone = true;
               this.error_cphone = false;
               this.error_phone_message = '您输入的手机号格式不正确';
            }
         },
         send_sms_code() {
            // 手机号验证码发送
            if (this.error_cphone) {
               this.$axios({
                  url: 'userapp/phone/',
                  method: 'POST',
                  data: {
                     phone: this.phone,
                     phone_id: this.phone_id
                  }
               }).then(resp => {
                  alert(resp.data.msg)
               })
            } else {
               this.check_phone();
            }
         },
         check_sms_code() {
            // 手机号验证码校验
            if (!this.phone_code) {
               this.error_sms_code_message = '请填写短信验证码';
               this.error_sms = true;
               this.error_sms_code = false;
            } else {
               this.$axios({
                  url: 'userapp/phone/',
                  method: 'PUT',
                  data: {
                     phone_id: this.phone_id,
                     phone_code: this.phone_code,
                  }
               }).then(resp => {
                  if (resp.data.code === 200) {
                     this.error_sms = false;
                     this.error_sms_code = true;
                     this.error_sms_code_message = resp.data.msg;
                  } else {
                     this.error_sms = true;
                     this.error_sms_code = false;
                     this.error_sms_code_message = resp.data.msg;
                  }
               }).catch(error => {
                  console.log(error)
               })
            }
         },
         check_image_code() {
            // 图片验证码校验
            if (!this.image_code) {
               this.error_image = true;
               this.error_image_code = false;
               this.error_image_code_message = '请填写图片验证码';
            } else {
               this.$axios({
                  url: 'userapp/image/',
                  method: 'PUT',
                  data: {
                     image_id: this.image_id,
                     image_code: this.image_code
                  }
               }).then(resp => {
                  if (resp.data.code === 200) {
                     this.error_image = false;
                     this.error_image_code = true;
                     this.error_image_code_message = resp.data.msg;
                  } else {
                     this.error_image = true;
                     this.error_image_code = false;
                     this.error_image_code_message = resp.data.msg;
                  }
               })
            }
         },
         check_allow() {
            this.error_allow = !this.allow;
         },
         on_submit() {
            // 注册
            if (!this.allow) {
               this.error_allow = true
            } else if (this.error_cname && this.error_cpassword && this.error_check_cpassword && this.error_cphone && this.error_sms_code && this.error_image_code) {
               this.$axios({
                  url: 'userapp/user/',
                  method: 'POST',
                  data: {
                     username: this.username,
                     password: this.password,
                     phone: this.phone
                  }
               }).then(resp => {
                  alert(resp.data.msg);
                  if (resp.data.code){
                     this.$router.push('/login')
                  }
               })
            } else {
               this.check_phone();
               this.check_sms_code();
               this.check_image_code();
               alert('请填写正确的必要信息')
            }
         },
         generate_image_code() {
            // 生成 uuid 请求图片验证码
            this.$axios({
               url: 'userapp/uuid/',
               method: 'GET',
            }).then(resp => {
               if (resp.data.code === 200) {
                  this.image_id = resp.data.uuid_code;
               }
            })
         },
         generate_phone_code() {
            // 生成 uuid 用来储存手机号验证码
            this.$axios({
               url: 'userapp/uuid/',
               method: 'GET',
            }).then(resp => {
               if (resp.data.code === 200) {
                  this.phone_id = resp.data.uuid_code;
               }
            })
         },
      },
      created() {
         this.generate_image_code();
         this.generate_phone_code();
      },
      computed: {},
      filters: {},
      watch: {},
   }
</script>

<style scoped>

</style>
